@import url(base.less);

.index-top-header{
  .pf(0,0,8);
  .w(100%);
}
.h41{
  .h(41px);
}
.index-header{
  .w(100%);
  height:46px;line-height: 46px;
  .tc;
  .bg-size('home_herd_bg.png',6px,46px,left,top,repeat-x);
  h2{
    .h(40px);
    display:inline-block;
    .pr;
    .ml(20);
  }
  .sjx{
    .pa(76px,18px);
    .transition(0.5s);
    .rorate();
  }
  .down-menu-on{
    .rorate(90deg);
  }

}
.center-tab{
  a{
    .c(#a38d28);
    font-weight:normal;
    margin:5px 6px 0;
    padding:0 4px;
    .fz(16);
    display:inline-block;
    .dl(25);
    -webkit-animation:smallWz .4s ease;
    .fl;
  }
  .animate{
    -webkit-animation-play-state:paused;
  }
  .on{
    border-bottom:3px solid #000;
    color:#000;
    .border-radius(8%);
    -webkit-animation-play-state:running;
  }
}


@-webkit-keyframes smallWz{
  0%{-webkit-transform:scale(1,1);}
  50%{ -webkit-transform: scale(.6,.6);}
  100%{-webkit-transform:scale(1,1);}
}
.menu-icon{
  .fr;
  .mr(10);
  .wh(18px,16px);
  .fullbg('index_03.png');
  .mt(10);
  -webkit-transition: .2s;
}
.top-search-icon{
  .fl;
  .ml(10);
  .wh(20px,20px);
  .fullbg('search.png');
  .mt(9);
}
.top-nav{
  .bg-color(#252832);
  .transition(0.2s);
  height:0;
  overflow:hidden;
  .pb(0);
  .pf(0,41px,3);
  .w(100%);
  li{
    .pt10;
  }
  a{
    display:inline-block;
    .wh(80px,30px);
    .lh(30);
    .g9;
    .bd(#999);
    .border-radius();
    .f14;
  }
  .on{
    color:@cyellow;
    .bd(@cyellow);
  }
  .close-icon{
    border:none;
    .mt5;
  }
}
.top-nav-on{
  .pb(10);
  height:255px;
}
.graybg{
  .bg-color(@ce);
}
.index-top{
  .pr;
  .bg-color(#fff);
  .shadow{
    .wh(100%,4px);
    .bg-size('customer_header_bg.png',4px,4px,left,top,repeat-x);
    .pab(0,-4px);
  }
}
.index-banner{
  .wh(100%,175px);
  .bg-color(#ccc);
  img{
    .wh(100%,175px);
  }
}
.index-top-live{
  .p10;
  .dl(32);
  .tx-list{
    .fr;
    img{
      .pr;
      .ml(-13);
      .wh(30px,30px);
      border:3px solid #fff;
      .border-radius(100%);
      &:first-child{
        margin:0;
      }
    }
    .tx_0{z-index:5;}
    .tx_1{z-index:4;}
    .tx_2{z-index:3;}
    .tx_3{z-index:2;}
    .tx_4{z-index:1;}
  }
  .desc{
    .pl(40);
    .bg-size('live_icon.png',32px,32px);
  }
}
.index-list{
  .mt(14);
}

.pingce{
  .bg-color(@cwhite);
  margin-bottom:10px;
  .pr;
  .bdb(#dcdcdc);
  .mask{
    .pa(10px,10px);
    .c(#e4c84e);
    padding:5px 10px;
    .bd(#ffe052);
    .bg-color(rgba(0,0,0,0.3));
  }
  .three{
    .h(186px);
    img{
      .fl;
      .w(35%);
      .box-sizing();
    }
    .img_0{
      .wh(65%,186px);
      .pr(1);
    }
    .img_3{
      .wh(100%,100%);
    }
  }
  .img_1,.img_2{
    .h(93px);
  }
  .img_1{
    .pb(1);
  }
  .star{
    .p10;
    span{
      .dib(20,20);
      .bg-size('wuxin.png',100%,auto);
      .mr(5);
    }
    .empty-star{
      background-position:0 -37px;
    }
  }

  .tit{
    .plr();
    .lh(22);
  }
  .time{
    .pl(10);
  }
  .bottom{
    margin:10px 10px 0;
    .bdt(#e6e6e6);
    .pt10;
    padding-bottom:10px;
    .dl(38);
  }
  .tx-list{
    img{
      .pr;
      .ml(-13);
      .wh(30px,30px);
      border:3px solid #fff;
      .border-radius(100%);
      &:first-child{
        margin:0;
      }
    }
    .tx_0{z-index:5;}
    .tx_1{z-index:4;}
    .tx_2{z-index:3;}
    .tx_3{z-index:2;}
    .tx_4{z-index:1;}
  }
  .opreat{
    .fr;
  }
  .icon{
    .dib(30,30);
  }
  .xin{
    transition:all .3s;
    .bg-size('zan.png',100%,auto,left,0);
    margin-right:10px;
  }
  .xin-on{
    background-position:left -33px;
  }
  .com{
    .bg-size('com.png',100%,auto,left,0);
  }
}
.list-user{
  .mt10;
  .plr();
  .dl(32);
  .fz(14);
  img{
    .wh(32px,32px);
    .fl;
    margin-right:10px;
  }
}
.atten,.attend,.tx,.female,.male,.com-icon,.xin{
  .bg-size('customer_icon.png',109px,auto);
}
.atten{
  .dba(80,32);
  .fr;
  background-position:left -52px;
}
.attend{
  background-position:left top;
}
.ugc{
  .pic{
    .pr;
  }
}
.article{
  .tit{
    .plr();
    .tc;
    .fz(22);
    .lh(30);
    max-height:60px;
    .oh;
    font-weight:normal;
  }
  .atten{
    float:none;
    display:inline-block;
  }
  .user{
    .tc;
    .pr;
    img{
      .ab-center(32,32);
      margin-top:-45px;
    }
  }
}
.cr{
  .c(#e66767);
}
.live-pic-bottom{
  .dl(33);
  .bg-color(rgba(0,0,0,0.8));
  .pab();
  .w(100%);
  .c(#fff);
}
.live{
  .pic{
    .pr;
    a{
      .db;
    }
  }
  .live-icon{
    .bg-size('play_icon.png',78px,78px);
    .wh(78px,78px);
    .ab-center(78,78);
  }
}
.swiper-wrapper{
  .h(175px);
}
.swiper-container .swiper-pagination .swiper-pagination-bullet{
  .wh(18px,2px);
  .border-radius(0);
  .bg-color(rgba(255,255,255,0.5))
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active{
  .bg-color(#ffd200);
}

.live-animate-icon{
  .fr;
  .ml10;
  span{
    height:12px;
    width:2px;
    background:#fff;
    display:inline-block;
    animation:loader 1s infinite;
    .mr(2);
    &:nth-child(1){
      animation-delay:.1s;
    }
    &:nth-child(2){
      animation-delay:.2s;
    }
    &:nth-child(3){
      animation-delay:.3s;
    }
    &:nth-child(4){
      animation-delay:.4s;
    }
  }
}
@keyframes loader{
  50% { height:4px; margin-top:8px; }
}


.index-top-search{
  .pr;
  padding: 5px 60px 0 10px;
  .search-box{
    background:url("../../images/search_gray_icon.png") 10px 7px no-repeat #fffdf2;
    background-size:16px 16px;
    .dl(30);
    padding:0 15px 0 32px;
    .border-radius(5px);
  }
  .cancle-btn{
    .par(0,0);
    .db;
    .w(60px);
    .tc;
    .f14;
    .lh(40);
  }
  .input-txt{
    .wh(100%,28px);
    padding:0;
    border:0;
  }
}
.top-search{
  .pa(-640px,0);
  transition:all .5s;
  -webkit-transition:all .5s;
}
.top-search.show{
  left:0;
}

.search-page{
  .wh(100%,100%);
  .bg-color(#eeeeee);
  position:fixed;
  right:-640px;
  top:0;
  z-index:7;
  overflow-y:auto;
  transition:all .6s;
  -webkit-transition:all .6s;
}
.search-page.show{
  right:0;
}
.search-list-box{
  .bg-color(#fff);
  padding:16px;
  .bdb(#dcdcdc);
  border-top:1px solid #dcdcdc;
  .bar{
    .lh(20);
    h3{
      .f14;
      font-weight:normal;
    }
    .icon{
      .fr;
      .c(#9a9a9a);
      .tc;
      .lh(20);
    }
  }
  ul{
    .pt10;
    li{
      .fl;
      .dl(30);
      .mb(10);
      .mr(10);
    }
    a{
      .bd(#9e9e9e);
      .db;
      padding:0 15px;
      .border-radius(15px);
      .c(#9e9e9e);
    }
    .active{
      transform: scale(.8,.8);
      -webkit-transform: scale(.8,.8);
      transition:all .2s;
      -webkit-transition:all .2s;
      .c(#e66767);
      .bd(#e66767);
    }
  }
  .hot-word{
    a{
      .bd(#e66767);
      .c(#e66767);
    }
    .active{
      .c(#9e9e9e);
      .bd(#9e9e9e);
    }
  }
}
.clear-icon{
  .bg-size('clear_history_icon.png',20px,20px,left,center);
  .dib(20,20);
  .fl;
}
.refresh-icon{
  .bg-size('refresh_hot_icon.png',20px,20px,left,center);
  .dib(20,20);
  .fl;

  //animation:rotateOne .5s linear;
  //animation-play-state: paused;
}
.active .refresh-icon{
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  transition:all .8s;
  -webkit-transition:all .8s;
}
.active .clear-icon{
  transform:rotate(-75deg);
  -webkit-transform:rotate(-75deg);
  transition:all .8s;
  -webkit-transition:all .8s;
}
.animate-play{
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important;
}
.active .animate{
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important;
}

@keyframes rotateOne {
  100%{
    transform: rotate(360deg);
  }
}

.my-atten{
  .bg-color(#fff);
  .bdb(#dddddd);
  .bar{
    .dl(36);
    .bdb(#dddddd);
    .plr;
    h3{
      .fz(14);
    }
  }
  .cont{
    .p10;
  }
}
.my-attend-list{

  li{
    .tc;
    .fl;
    .w(20%);
    img{
      .wh(42px,42px);
      .border-radius(100%);
    }
    p{
      .mt(5);
      .c(#89898a);
      .pr;
    }
    .red-dot{
      display:inline-block;
      .wh(5px,5px);
      .bg-color(#ec4b4b);
      .border-radius(100%);
      .mr(5);
      margin-top:-2px;
      vertical-align: middle;
    }
  }
}

.new-message-tip{
  .bg-color(rgba(106,178,252,0.8));
  .tc;
  .cw;
  .dl(30);
}
.no-attend{
  .tc;
  .bg-color(#fff);
  .ptb();
  .bdb(#ddd);
  p{
    .mt10;
    .c(#bfbfbf);
  }
}
.recommend-change-icon{
  .par(10px);
}
.recommend-list{
  .mt10;
  .bdt(#ddd);
  .p10;
  .top{
    .plr;
  }
  .user{
    .lh(21);
    .h(42px);
    img{
      .fl;
      .mr10;
    }
    h4{
      .c(#575758);
      font-weight:normal;
    }
    p{
      .c(#aaaaaa);
    }
  }
  dl{
    .pt10;
    .plr(5);
    dd{
      .fl;
      .w(33%);
      .box-sizing();
      .plr(5);
    }
    img{
      .wh(100%,95px);
    }
    p{
      .mt(5);
      .c(#656565);
    }
  }
}